
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>富豪排行榜</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
        <style>
            body{
                font-size: 14px;
            }
            header{
                position: fixed !important;
                top: 0;
            }
            footer{
                position: fixed;
                bottom: 0;
                width: 100%;
            }
            .contain{
                margin-top: 45px;
                margin-bottom: 55px;
            }
            .myBtn{
                width: 50%;
                float: left;
            }
            .myBtn:first-of-type{
                background: #fff;
                color: #646464;
            }
            .aui-list-view-cell{
                padding: 12px 0;
            }
            .aui-list-view-cell img{
                float: left;
                max-width: 60px;
                margin-right: 8px;
            }
            .aui-list-view-cell em{
                float: left;
                display: block;
                width: 15%;
                text-align: center;
                height: 63px;
                line-height: 63px;
                color: #646464;
                position: relative;
                z-index: 9;
                font-weight: bold;

            }
            .aui-list-view-cell em:after{
                content:"";
                background: #f2f2f2;
                position: absolute;
                border-radius: 50%;
                width: 25px;
                height: 25px;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
                z-index: -2;
                font-family: "auiicon" !important;
            }
            .aui-list-view-cell:nth-of-type(1) em,
            .aui-list-view-cell:nth-of-type(2) em,
            .aui-list-view-cell:nth-of-type(3) em{
                color: #ff3333;
            }
            .aui-list-view-cell:nth-of-type(1) em:after,
            .aui-list-view-cell:nth-of-type(2) em:after,
            .aui-list-view-cell:nth-of-type(3) em:after{
                border-radius: 0;
                font-size: 35px;
                background: none;
                left: 40%;
                top: 8%;
            }
            .aui-list-view-cell:nth-of-type(1) em:after{
                content:"\e776";
                color: #ffd511;
            }
            .aui-list-view-cell:nth-of-type(2) em:after{
                content:"\e776";
                color: #e6e6e6;
            }
            .aui-list-view-cell:nth-of-type(3) em:after{
                content:"\e776";
                color: #c8b37a;
            }
            .aui-list-view-cell a{
                margin: 0;
                padding: 0;
                width: 85%;
                float: left;
            }

            .aui-list-view-cell p:not(:last-of-type){
                color: #000;
            }
            .up .aui-arrow-right:after,
            .down .aui-arrow-right:after,
            .level .aui-arrow-right:after{
                font-size: 25px;
                font-weight: bolder;
            }
            /*升*/
            .up .aui-arrow-right:after{
                content: "\e6de";
                color: #1cbb43;
            }
            /*降*/
            .down .aui-arrow-right:after{
                content: "\e661";
                color: #ff2115;

            }
            /*不变*/
            .level .aui-arrow-right:after{
                content: "\e768";
                color: #39aafc;

            }
        </style>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav aui-border-b">
            <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
            <div class="aui-title">
                富豪排行榜
            </div>
        </header>
        <div class="contain">
            <ul class="aui-list-view my-list ">
                <li class="aui-list-view-cell down">
                    <em>1</em>
                    <a class="aui-arrow-right">
                        <img src="../../image/shili.jpg" alt="">
                        <p>合伙人返佣：80000元</p>
                        <p>平台账号：jcm0325</p>
                        <p>广东广州</p>
                    </a>
                </li>
                <li class="aui-list-view-cell up">
                    <em>2</em>
                    <a class="aui-arrow-right">
                        <img src="../../image/shili.jpg" alt="">
                        <p>合伙人返佣：80000元</p>
                        <p>平台账号：jcm0325</p>
                        <p>广东广州</p>
                    </a>
                </li>
                <li class="aui-list-view-cell level">
                    <em>3</em>
                    <a class="aui-arrow-right">
                        <img src="../../image/shili.jpg" alt="">
                        <p>合伙人返佣：80000元</p>
                        <p>平台账号：jcm0325</p>
                        <p>广东广州</p>
                    </a>
                </li>
                <li class="aui-list-view-cell down">
                    <em>4</em>
                    <a class="aui-arrow-right">
                        <img src="../../image/shili.jpg" alt="">
                        <p>合伙人返佣：80000元</p>
                        <p>平台账号：jcm0325</p>
                        <p>广东广州</p>
                    </a>
                </li>
                <li class="aui-list-view-cell down">
                    <em>5</em>
                    <a class="aui-arrow-right">
                        <img src="../../image/shili.jpg" alt="">
                        <p>合伙人返佣：80000元</p>
                        <p>平台账号：jcm0325</p>
                        <p>广东广州</p>
                    </a>
                </li>
                <li class="aui-list-view-cell down">
                    <em>6</em>
                    <a class="aui-arrow-right">
                        <img src="../../image/shili.jpg" alt="">
                        <p>合伙人返佣：80000元</p>
                        <p>平台账号：jcm0325</p>
                        <p>广东广州</p>
                    </a>
                </li>
                <li class="aui-list-view-cell up">
                    <em>7</em>
                    <a class="aui-arrow-right">
                        <img src="../../image/shili.jpg" alt="">
                        <p>合伙人返佣：80000元</p>
                        <p>平台账号：jcm0325</p>
                        <p>广东广州</p>
                    </a>
                </li>
                    <i class="aui-iconfont aui-icon-move1"></i>
            </ul>
        </div>
        <footer>
          <div class="myBtn">我的排名：26</div>
          <div class="myBtn" tapmode onclick="openToTwo('myShare')">马上推荐获取返佣</div>
        </footer>
    </body>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../../script/mui.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
            var mobile = api.pageParam.mobile;
        }
        // mui遮罩
        var mask = mui.createMask(hidePicker);

        // 关闭遮罩
        function hidePicker(){
            $(".sharePicker").removeClass("pickAnimate");
            mask.myclose();
        }
        //弹出分享
        function share(){
            mask.show();
            $(".sharePicker").addClass("pickAnimate");
        }
        
    </script>
</html>
